
<template>
  <div id="shopByDetail">
    <div id="my_options">
      <section>
        <!-- 头部信息 -->
        <div class="top_wrapper">
          <div class="img_wrapper">
            <div class="imgbox" @click="go_login">
              <img :src="headimg">
            </div>
          </div>
          <div class="content_wrapper">
            <ul>
              <li class="userName">
                <span>{{userName}}</span>
              </li>
              <li class="detail">
                <div class="sign-wrapper" @click="signUp">
                  <span class="iconfont icon-bianji"></span>
                  <span>{{sign}}</span>
                </div>
                <!-- <span class="v_bean" @click="go('vb_vBeanList')">{{bean}}</span> -->
              </li>
            </ul>
          </div>
          <div>
            <ul v-if="$.appname === 'cn.carowl.vfuhuizhong'">
              <!-- <li class="gpsCity" @click="go('city_list')"><i class="iconfont icon-dingwei"></i>{{gpsCity}}</li>
                    <li class="weather">{{weather}}</li> -->
              <li class="vip-btn" v-if="rank" v-tap="{methods: toVipRule}">{{rank}}</li>
            </ul>
          </div>
        </div>
        <!-- 头部信息结束 -->
      </section>
      <section>
        <!-- 信息列表 -->
        <ul class="go_pages">
          <li v-if="!isWxPublic" @click="go('my_dynamic')">
            <a class="mui-navigate-right">我的动态</a>
            <i class="iconfont icon-tiaozhuan-copy"></i>
          </li>
          <!-- <li v-if="!isWxPublic" @click="go('orderlist')">
            <a class="mui-navigate-right">我的订单</a>
            <i class="iconfont icon-tiaozhuan-copy"></i>
          </li> -->
          <li @click="go('cb_card')">
            <a class="mui-navigate-right">我的卡券</a>
            <i class="iconfont icon-tiaozhuan-copy"></i>
          </li>
          <li @click="go('qrcode_mine')">
            <a class="mui-navigate-right">我的挪车码</a>
            <i class="iconfont icon-tiaozhuan-copy"></i>
          </li>
          <li v-if="!isWxPublic" @click="go('my_service')">
            <a class="mui-navigate-right">客服中心</a>
            <i class="iconfont icon-tiaozhuan-copy"></i>
          </li>
          <li v-if="!isWxPublic" @click="go('car_home')">
            <a class="mui-navigate-right">爱车之家</a>
            <i class="iconfont icon-tiaozhuan-copy"></i>
          </li>
          <li v-if="!isWxPublic" @click="go('my_settings')">
            <a class="mui-navigate-right">设置</a>
            <i class="iconfont icon-tiaozhuan-copy"></i>
          </li>
        </ul>
        <!-- 信息列表结束 -->
      </section>
      <div v-if="canTouchLogout && isWxPublic" class="loginOut" @click="logout">退出登录</div>
      <magicFooter v-if="!isWxPublic"></magicFooter>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import magicHeader from "components/magicHeader";
import magicFooter from "components/maFooter";
import passwordImg from "assets/password.png";
import getLocation from "services/get-location";
import axios from "axios";
import myOptions from "services/vfhz/my_options";
import femal from "assets/femal.png";
import male from "assets/male.png";
import wx from "weixin-js-sdk";
export default {
  name: "my_options",
  data() {
    return {
      passwordImg: passwordImg,
      userName: "未登录",
      bean: "",
      headimg: femal,
      latitude: "",
      longitude: "",
      sign: "未签到",
      address: "",
      userId: "",
      shopId: "",
      isWxPublic: false,
      canTouchLogout: false,
      canSign: true,
      femal: femal,
      male: male,
      // gpsCity: "长春市",
      // weather: "",
      rank: ""
    };
  },
  created() {
    console.log(this.$.env === "wxPublic");
    //获取用户信息
    this.shopId = this.$.shopId;
    let user = this.$.user;
    this.userId = this.$.userId;
    //判断微信环境
    if (this.$.env === "wxPublic") {
      this.isWxPublic = true;
    }
    if (this.userId !== undefined) {
      this.canTouchLogout = true;
      myOptions.bind(this)(
        {
          methodName: "QueryUserInfo",
          shopId: this.shopId,
          userId: this.userId
        },
        res => {
          this.bean = res.bean;
          this.userName = res.userName;
          this.headimg = res.headerUrl;
          this.sign = res.sign;
          this.rank = res.rank;
          if (res.headerUrl === "" || !res.headerUrl) {
            if (res.gender === 0) {
              this.headimg = male;
            } else {
              this.headimg = femal;
            }
          } else {
            this.headimg = this.addPath(res.headerUrl);
          }
        },
        err => {
          console.log(err);
        }
      );
      // myOptions.bind(this)(
      //   {
      //     methodName: "QueryWeather",
      //     cityId: this.gpsCity
      //   },
      //   res => {
      //     this.weather = res.weather;
      //     console.log(res);
      //   },
      //   err => {
      //     console.log(err);
      //   }
      // );
      this.getPosition();
    }
  },
  methods: {
    //签到
    signUp() {
      if (this.canSign === false) {
        return;
      }
      if (this.userId) {
        this.canSign = false;
        if (this.sign === "已签到") {
          this.$.toast("您今天已经签到");
          this.canSign = true;
          return;
        }
        myOptions.bind(this)(
          {
            methodName: "SignForPlatform",
            memberPosition: this.address,
            shopId: this.shopId,
            userId: this.userId
          },
          res => {
            console.log(res);
            // this.bean = res.bean;
            this.sign = "已签到";
            this.$.toast("签到成功");
            this.canSign = true;
          },
          err => {
            console.log(err);
          }
        );
      } else {
        this.$.login({
          name: "login"
        });
      }
    },
    //跳转方法
    //某些需要判断是否登录继续跳转
    go(params) {
      if (!this.$.userId) {
        if (
          params === "my_dynamic" ||
          params === "cb_card" ||
          params === "qrcode_mine" ||
          params === "orderlist"
        ) {
          this.$.login({
            name: "login"
          });
          return;
        }
      }
      switch (params) {
        case "car_home":
          window.location.href =
            "http://a.app.qq.com/o/simple.jsp?pkgname=cn.carowl.icfw";
          break;
        case "my_service":
          this.$.toast("客服功能暂未上线,请直接拨打电话 400-655-6991");
          break;
          my_dynamic;
        case "orderlist":
          this.$router.push({
            name: "orderlist",
            params: {
              status: 0
            }
          });
          break;
        default:
          this.$router.push({
            name: params
          });
          break;
      }
    },
    //获取微信签名
    getSign() {
      let signHref = location.href.split("#")[0];
      let signOpenId = this.$.state;
      let signUrlInfo = encodeURIComponent(signHref);
      let signData = {
        clientType: '3',
        methodName: "QueryJssdkConfig",
        shopId: "",
        userId: "",
        urlInfo: signUrlInfo,
        wechatOpenId: signOpenId
      };
      this.$.wxGet(signData).then(res => {
        var res = res.data;
        wx.config({
          debug: true,
          appId: res.appId,
          timestamp: res.timestamp,
          nonceStr: res.nonceStr,
          signature: res.signature,
          jsApiList: ["getLocation"]
        });
      });
    },
    //微信中获取地理位置
    getPosition() {
      //判断微信环境
      if (this.isWxPublic) {
        //获取签名
        let vm = this;
        vm.getSign();
        wx.ready(function() {
          wx.getLocation({
            type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function(res) {
              getLocation.getAdd(res.latitude, res.longitude).then(res => {
                vm.latitude = res[0].y;
                vm.longitude = res[0].x;
                getLocation.getCityName(vm.latitude, vm.longitude).then(res => {
                  let address = res.formatted_address;
                });
              });
            }
          });
        });
      } else {
        this.$.push("data_getLatLng", {}, resp => {
          let vm = this;
          resp = JSON.parse(resp);
            console.log(resp)
          this.latitude = parseFloat(resp.latitude);
          this.longitude = parseFloat(resp.longitude);
          getLocation.getCityName(this.latitude, this.longitude).then(res => {
            console.log(res)
            this.address = res.formatted_address;
          });
        });
      }
    },
    //微信点击头像登录
    go_login() {
      if (!this.isWxPublic) {
        if (this.userId) {
          this.$router.push({
            name: "my_info"
          });
          return;
        } else {
          this.$.login({
            name: "login"
          });
        }
      } else {
        if (!this.userId) {
          this.$router.push({
            name: "login"
          });
        }
      }
    },
    //微信中退出
    logout() {
      alert(JSON.stringify(this.$.user));
      this.userId = "";
      this.canTouchLogout = false;
      axios
        .post(
          this.$.host + "/api/unbind.jhtml",
          {
            clientType: this.$.getClientType,
            methodName: "Unbind",
            userId: this.$.userId,
            shopId: this.$.shopId,
            wechatOpenId: this.$.state,
            wechatUserOpenId: this.$.openid
          },
          {
            timeout: 60000
          }
        )
        .then(res => {
          alert(JSON.stringify(res));
          Vue.prototype.setUserInfo(this.$.getAttr("initInfo"));
          Vue.prototype.$.editAttr("userId", "");
          this.userName = "未登录";
          this.bean = "";
          this.headimg = femal;
          this.sign = "未签到";
        })
        .catch(err => {
          alert(err);
        });
    },
    // 跳转到会员中心
    toVipRule() {
      this.$router.push({
        name: "vb_vipRule"
      });
    }
  },
  mounted() {},
  components: {
    magicHeader,
    magicFooter
  }
};
</script>
<style scoped="scoped">
#my_options .top_wrapper {
  display: flex;
  height: 150px;
  padding-top: 23px;
  font-size: 14px;
  background-color: #f98700;
  color: #fff;
}
#my_options .top_wrapper .img_wrapper {
  flex: 0 0 100px;
}
#my_options .top_wrapper .img_wrapper .imgbox {
  border-radius: 50%;
  border: 4px solid #fff;
  width: 58px;
  height: 0;
  padding-top: 50%;
  margin: 17px 0 0 22px;
  position: relative;
  overflow: hidden;
}
#my_options .top_wrapper .img_wrapper .imgbox img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: none !important;
}
#my_options .top_wrapper .content_wrapper {
  flex: 1;
}
#my_options .top_wrapper .content_wrapper ul {
  margin-top: 10px;
}
#my_options .top_wrapper .content_wrapper ul li {
  padding: 13px 0;
}
#my_options .top_wrapper .content_wrapper ul li.detail .sign-wrapper {
  display: inline;
  width: 70px;
  text-align: center;
  padding: 2px 3px;
  border-radius: 10px;
  background-color: #fff;
  color: #333;
}
#my_options .top_wrapper .content_wrapper ul li.detail .v_bean {
  display: inline;
  margin-left: 15px;
}
#my_options .top_wrapper .weather_wrapper {
  flex: 0 0 115px;
}
#my_options .top_wrapper .weather_wrapper ul {
  margin-top: 10px;
}
#my_options .top_wrapper .weather_wrapper ul li {
  padding: 13px 5px 13px 0;
  text-align: right;
}
#my_options .go_pages li {
  padding: 15px;
  border-bottom: 1px solid #ddd;
}
#my_options .go_pages li a {
  font-size: 16px;
  color: #333;
}
#my_options .go_pages li .icon-tiaozhuan-copy {
  float: right;
}
#my_options .loginOut {
  position: absolute;
  left: calc(50vw - 110px);
  bottom: 40px;
  height: 50px;
  line-height: 50px;
  width: 220px;
  font-size: 16px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background-color: #f98700;
}
.vip-btn {
  border: 1px solid;
  border-radius: 20px 0px 0 20px;
  border-right: none;
  padding: 5px;
  background: #00000038;
  border-color: #00000000;
  margin: 20px 0;
  padding-left: 15px;
  min-width: 70px;
  text-align: center;
}
</style>